<template>
  <div class="cartcontrol">
    <transition name='move'>
      <div class="cart-decrease" v-show='food.count>0' @click.stop.prevent='decreseCart'>
        <span class="inner icon-remove_circle_outline"></span>
      </div>
    </transition>
    <div class="cart-count" v-show='food.count>0'>
      {{food.count}}
    </div>
    <div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>
  </div>
</template>

<script type="text/ecmascript-6">
    import Vue from 'vue';
    export default {
      props: {
        food: {
          type: Object
        }
      },
      methods: {
        addCart(event) {
          if (!event._constructed) {
            return;
          }
          if (!this.food.count) {
            // 如果是一个本身没有的属性的增减，需要乃至$set才行
            Vue.set(this.food, 'count', 1);
          } else {
            this.food.count ++;
          }
          // 向父组件派发事件，传入DOM结构，用于小球动画定位(2.0)
          this.$root.eventHub.$emit('cart.add', event.target);
          // this.$emit('cart.add', event.target);
        },
        decreseCart(event) {
          if (!event._constructed) {
            return;
          }
          if (this.food.count) {
            this.food.count --;
          }
        }
      }
    };
</script>

<style lang='stylus' rel='stylesheet/stylus'>
    .cartcontrol
      font-size :0
      .cart-decrease
        display :inline-block
        padding: 6px
        transition :all .4s linear
        &.move-transition
          opacity :1
          transform :translate3d(0,0,0)
        .inner
          display :inline-block
          font-size :24px
          line-height :24px
          color:rgb(0,160,220)
          transition :all .4s linear
          transform :rotate(0)
        &.move-enter-active, &.move-leave
          opacity: 1
        &.move-enter, &.move-leave-active
          opacity: 0
          transform :translate3d(24px,0,0)
          .inner
            transform :rotate(180deg)
      .cart-count
        display :inline-block
        vertical-align :top
        width :12px
        padding-top :6px
        line-height :24px
        text-align :center
        font-size :10px
        color:rgb(147,153,159)
      .cart-add
        padding: 6px
        display :inline-block
        font-size :24px
        line-height :24px
        color:rgb(0,160,220)
</style>
